<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 首页user信息 -->
          <el-card shadow="hover">
            <div class="userCard">
              <!-- <el-avatar
                :size="150"
                src=""
              ></el-avatar> -->
              <div class="userInfo">
                <p class="important-font">Admin</p>
                <p class="secondary-font">管理员</p>
              </div>
            </div>
            <!-- <div class="login-info">
              <p>上次登录时间: 2022/07/06 18:16</p>
            </div> -->
          </el-card>
          <!-- 日历 -->
          <el-card shadow="hover" class="calendar" style="height: 300px">
            <el-calendar v-model="value">
              <template slot="dateCell " slot-scope="{ data }">
                <div :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split("-")[2] }}
                </div>
              </template>
            </el-calendar>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <!-- 信息 -->
        <div class="num">
          <el-card
            v-for="item in countData"
            :key="item.name"
            :body-style="{ display: 'flex', padding: 0 }"
            class="OrderCard"
          >
            <i
              class="icon"
              :class="'el-icon-' + item.icon"
              :style="{ background: item.color }"
            ></i>
            <div>
              <p class="secondary-font" style="text-align: center">
                {{ item.name }}
              </p>
              <p class="important-font" style="text-align: center">
                {{ item.value }}
              </p>
            </div>
          </el-card>
        </div>
        <!-- 柱状图 -->
        <el-card style="height: 280px">
          <div style="height: 280px" ref="barEcharts">
            {{ initBarEcharts() }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import * as echarts from "echarts";

export default {
  name: "Index",
  data() {
    return {
      // imgUrl:require('../assets/avatar.jpg'),
      url:"",
      value: new Date(),
      countData: [
        {
          name: "",
          value: "",
          icon: "",
          color: "",
        },
        {
          name: "",
          value: "",
          icon: "",
          color: "",
        },
        {
          name: "",
          value:"",
          icon: "",
          color: "",
        },
        {
          name: "",
          value: "",
          icon: "",
          color: "",
        },
      ],
    };
  },
  created() {
    this.getCompanyTotalCount();
    this.getCompanyActiveCount();
    this.getStaffCount();
    this.getUserCount();
    this.getOrderCount();
  },
  methods: {
    // getinfo() {
    //   this.axios
    //     .get("api/sys/auth/myInfo")
    //     .then((response) => {
    //       this.url = response.data.value.faceUrl
    //     })
    //     .catch((error) => {
    //       this.$message.error(error);
    //     });
    // },
    getCompanyTotalCount() {
      this.countData[0].name = "公司总数";
      this.countData[0].icon = "office-building";
      this.countData[0].color = "#2ec7c9";
      this.axios
        .get("api/sys/auth/countCompany")
        .then((response) => {
          if (response.data.code == "200") {
            this.countData[0].value = response.data.value.total;
            // console.log(this.countData[0]);
            // console.log(response.data.value.total);
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    getCompanyActiveCount(){
      this.countData[1].name = "公司活跃数";
      this.countData[1].icon = "office-building";
      this.countData[1].color = "#ffb980";
      this.axios
        .get("api/sys/auth/countCompany")
        .then((response) => {
          if (response.data.code == "200") {
            this.countData[1].value = response.data.value.active;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    getStaffCount(){
      this.countData[2].name = "公司员工数";
      this.countData[2].icon = "tickets";
      this.countData[2].color = "#5ab1ef";
      this.axios
        .get("/api/sys/auth/countUser")
        .then((response) => {
          if (response.data.code == "200") {
            this.countData[2].value = response.data.value.companyUserNum;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    getUserCount(){
      this.countData[3].name = "用户总数";
      this.countData[3].icon = "tickets";
      this.countData[3].color = "#2ec7c9";
      this.axios
        .get("/api/sys/auth/countUser")
        .then((response) => {
          if (response.data.code == "200") {
            this.countData[3].value = response.data.value.customerNum;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    getOrderCount(){
      // this.axios
      //   .get("/api/sys/auth/countOrder")
      //   .then((response) => {
      //     if (response.data.code == "200") {
      //       console.log('order',response.data.value);
      //     } else {
      //       this.$message.error(response.data.message);
      //     }
      //     this.listLoading = false;
      //   })
      //   .catch((error) => {
      //     this.$message.error("无法获取数据");
      //     this.listLoading = false;
      //   });
    },
    //柱状图
    initBarEcharts() {
      // 新建一个promise对象
      let p = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      p.then(() => {
        //	此dom为echarts图标展示dom
        let myChart = echarts.init(this.$refs.barEcharts);
        let option = {
          title: {
            text: "收益表",
          },
          tooltip: {},
          legend: {
            data: ["今日收益", "昨日收益"],
          },
          xAxis: {
            data: ["公司1", "公司2", "公司3", "公司4", "公司5", "公司6"],
          },
          yAxis: {},
          series: [
            {
              name: "今日收益",
              type: "bar",
              data: [5, 20, 36, 10, 10, 13],
            },
            {
              name: "昨日收益",
              type: "bar",
              data: [10, 18, 34, 8, 12, 14],
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.el-card__body {
  padding: 10px;
}
.userCard {
  height: 180px;
  display: flex;
  border-bottom: 2px solid #dcdfe6;
  border-radius: 2px;
}
.userInfo {
  width: auto;
  padding: 6% 0 0 6%;
}
.important-font {
  font-weight: 900;
  font-size: 25px;
}
.secondary-font {
  color: #909399;
}
.login-info {
  height: 40px;
  text-align: left;
  color: #909399;
}
.tableInfo {
  margin: 20px 0 0 0;
}
.OrderCard {
  margin: 0 0 30px 30px;
  border: #dcdfe6 1px solid;
  border-radius: 10px;
  i {
    width: 30%;
    line-height: 120px;
    font-size: 30px;
    color: #fff;
  }
  div {
    width: 300px;
  }
}
.el-card {
  border: none;
}
.icon {
  text-align: center;
  line-height: 70px;
}
.num {
  display: flex;
  flex-wrap: wrap;
}
.graph {
  margin: 15px 0 0 0;
}

/deep/ .el-calendar {
  font-size: 14px;
  .next {
    border: none;
  }
  td {
    border: none;
  }
  .el-calendar-day {
    height: 35px !important;
    text-align: center;
    border: none;
  }
  .el-calendar__header {
    justify-content: space-between;
  }
  .is-selected {
    background-color: #1d8dd8;
    color: #fff;
  }
}
</style>